<template>
	<view class="content">
		<view class="card" v-for="(item,index) in dataList" :key="index">
			<view class="title-content">
				<view style="display: flex;padding: 20rpx 20rpx 0 20rpx; justify-content: space-between;">
					<view class="title">
						寄售单号 {{item.consignOrderNo}}
					</view>
					<view class="title-c" style="padding: 10rpx;border-radius: 8rpx;">
						{{scheduledStatus[item.status]}}
					</view>
				</view>
				<view style="border-bottom: 1px solid #f6f6f6;margin: 20rpx;"></view>
				<view style="display: flex;padding: 20rpx;justify-content: space-between;">
					<view class="title">
						商户名称
					</view>
					<view class="title-c" style="flex: 1;margin-left: 10rpx;display: flex;justify-content: flex-end;">
						{{item.merName}}
					</view>
				</view>
				<view class="column" style="display: flex;justify-content: space-between;">
					<view class="font-weight-content">
						仓库名称
					</view>
					<view class="font-weight-content">
						{{item.depotName}}
					</view>
				</view>
				<view class="column" style="display: flex;justify-content: space-between;">
					<view class="font-weight-content">
						送达时间
					</view>
					<view class="font-weight-content">
						{{item.deliverTime}}
					</view>
				</view>
				<view style="display: flex;padding: 20rpx;justify-content: space-between;">
					<view class="title">
						{{distributionBatch[item.distributionBatch]}}
					</view>
					<view class="title-c" style="color: #201b8c;">
						{{item.deliveryTime}}
					</view>
				</view>
				
				
				<view class="bg-content" style="display: flex;justify-content: space-around;background-color: #f8f8f8;margin: 20rpx;padding: 30rpx;border-radius: 20rpx;">
					<view style="display: flex;padding: 20rpx;justify-content: space-between;">
						<view class="title">
							寄售总数：
						</view>
						<view class="title-c" style="font-weight: bold;">
							{{item.productNumber}}
						</view>
					</view>
				</view>
				
				<view style="border-bottom: 1px solid #f6f6f6;margin: 20rpx;"></view>
				<view class="content-footer" style="margin-top: 20rpx;padding-bottom: 10rpx;display: flex;">
					<button style="margin:10px ;line-height: 64rpx; font-weight: bold;flex: 1;" class="plain_bgColor"
						>联系买家</button>
					<button style="margin:10px ;line-height: 64rpx; font-weight: bold;flex: 1;" class="plain_bgColor"
						>签到</button>
					<button style="margin:10px ;line-height: 64rpx; font-weight: bold;flex: 1;" class="plain_bgColor"
						@click="toDetailPage(item)">查看详情</button>
					<button style="margin:10px ;line-height: 64rpx; font-weight: bold;flex: 1;" class="plain_bgColor"
						>转发</button>
				</view>
			</view>
		</view>
		
		<u-empty v-if="!dataList.length" style="background-color: #fff;height: 100vh;" mode="data"
			icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
		<!-- 上拉加载更多 -->
		<uni-load-more v-else :status="loadMoreStatus"></uni-load-more>
	</view>
</template>

<script>
	import {
		getConsignSaleApi
	} from '@/api/consignSale.js';
	import {
		setThemeColor
	} from '../../../utils/setTheme';
	export default {
		props: {
			tab: {
				type: [Object],
				default: ''
			},
		},
		data() {
			return {
				cancellForm: {
					current: 1,
					size: 10,
				},
				totalPage: 1,
				loadMoreStatus: 'noMore',
				dataList: [],
				scheduledStatus:{
					0:'待送货',
					1:'送货中',
					2:'已完成',
					3:'商户已取消',
					4:'仓库已取消',
					5:'平台已取消'
				},
				distributionBatch:{
					1:'上午',
					2:'下午',
					3:'晚上',
					4:'凌晨',
				}
			}
		},
		onLoad() {
			this.bgColor = setThemeColor()
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
		},
		created() {
			this.initData();
		},
		methods: {
			initData() {
				// 首次激活时被调用
				this.cancellForm.current = 1;
				this.loadMoreStatus = 'more';
				//需要初始化列表数据，根据数据类型
				this.cancellForm.status = this.tab.type;
				this.getConsignSaleList();
			},
			// 触底事件 onReachBottom 加载更多数据
			scrolltolowerFn() {
				if (this.loadMoreStatus != 'more') {
					return;
				};
				this.cancellForm.current++;
				this.getConsignSaleList(true);
			},
			onrefresh(e) {
				this.refreshing = true;
				this.refreshText = "刷新中...";
				setTimeout(() => {
					this.refreshing = false;
					this.refreshFlag = false;
					this.refreshText = "已刷新";
				}, 2000)
			},
			onpullingdown(e) {
				if (this.refreshing) {
					return;
				}
				this.pulling = false;
				if (Math.abs(e.pullingDistance) > Math.abs(e.viewHeight)) {
					this.refreshFlag = true;
					this.refreshText = "释放立即刷新";
				} else {
					this.refreshFlag = false;
					this.refreshText = "下拉可以刷新";
				}
			},
			// 搜索查询
			searchProduct(valueKey) {
				if(valueKey == ''){
					delete this.cancellForm.consignOrderNo;
					this.cancellForm.current = 1;
					this.loadMoreStatus = 'more';
					this.getConsignSaleList();
				}else{
					this.cancellForm.current = 1;
					this.cancellForm.consignOrderNo = valueKey;
					this.loadMoreStatus = 'more';
					this.getConsignSaleList();
				}
			},
			toDetailPage(item){
				this.$emit('toDetailPage',item)
			},
			// --------api------获取数据
			getConsignSaleList(isMerge) {
				let that = this;
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				if (!isMerge) {
					this.cancellForm.current = 1;
					this.loadMoreStatus = 'more';
				};
				getConsignSaleApi(this.cancellForm).then((res) => {
					let data = res.data;
					if (isMerge) {
						that.$util.SplitArray(data.records, that.dataList);
					} else {
						that.dataList = data.records;
					}
					that.totalPage = data.pages;
					if (data.pages == this.cancellForm.current || data.pages == 0) {
						that.loadMoreStatus = 'noMore';
					}
					uni.hideLoading();
				})
			},
		},
	}
</script>

<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}
	
	.plain_bgColor {
		@include main_color(theme);
		@include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid;
	}
	
	.card {
		background-color: #fff;
		border-radius: 10rpx;
		margin: 20rpx;
	}
	
	.column {
		padding: 20rpx;
		display: flex;
		flex-flow: row;
		text-align: center;
		justify-content: space-between;
	
		.title {
			display: flex;
			// flex: 1;
			width: 150rpx;
		}
	
		.title-c {
			display: flex;
			flex: 1;
			justify-content: left;
			// padding-left: 20rpx;
		}
	}
</style>